<template>
  <div class="ybl">
    <div class="x m10px wf">
      <el-button
        v-if="pid"
        type="primary"
        v-html="'新增职员'"
        @click="itemC=$cp(defItem);show = !show"
      />
    </div>
    <div class="ybl">
      <el-table
        :data="tabData"
        border
        stripe
        highlight-current-row
        style="width: 100%"
        height="100"
        @row-click="addDepository"
      >
        <el-table-column fixed type="index" label="行号" width="50" />
        <el-table-column prop="id" label="id" width="80" />
        <el-table-column prop="name" label="姓名" width="80" show-overflow-tooltip />
        <el-table-column prop="tel" label="电话" width="80" show-overflow-tooltip />
        <el-table-column prop="username" label="用户名" width="80" show-overflow-tooltip />
        <el-table-column prop="password" label="密码" width="80" show-overflow-tooltip />
        <el-table-column label="用户类型" width="100">
          <template slot-scope="scope">
            <el-select
              @change="send({cmd:1,val:{type:scope.row.type,where:{id:scope.row.id}}})"
              v-model="scope.row.type"
              placeholder="请选择"
            >
              <el-option
                v-for="item in $gd.userType2"
                :key="item.name"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" width="138">
          <template slot-scope="scope">
            <el-switch
              style="display: block"
              v-model="scope.row.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="启用"
              inactive-text="禁用"
              :active-value="1"
              :inactive-value="0"
              @change="send({cmd:1,val:{state:scope.row.state,where:{id:scope.row.id}}})"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="itemC=scope.row; show=!show"
              v-html="'修改'"
              size="mini"
            />
          </template>
        </el-table-column>
        <el-table-column prop="other.remarks" label="备注" show-overflow-tooltip />
      </el-table>
    </div>
    <fy :value="value" @change="tabData=$event" />
    <createItem :fshow="show" :form="itemC" @change="change" />
  </div>
</template>

<script>
import createItem from "../components/create/userA.vue";
import fy from "../components/fy";

export default {
  components: { createItem, fy },
  props: {
    value: {
      type: [Array],
      default: () => {
        return [];
      }
    },
    pid: { default: 0 }
  },
  watch: {
    pid(a) {
      this.defItem.userType = a;
    }
  },
  data() {
    return {
      show: false,
      itemC: {},
      defItem: {
        id: 0,
        cid: 0,
        CreateTime: 0,
        ChangeTime: 0,
        UserTime: 0,
        state: 1,
        type: 1,
        username: "",
        password: "",
        name: "",
        tel: "",
        other: { remarks: "" }
      },
      tabData: []
    };
  },
  created() {
    this.itemC = this.$cp(this.defItem);
  },
  methods: {
    test(a) {
      console.log(this.$cp(a));
    },
    send(v) {
      const data = v;
      data.val.token = sessionStorage.token;
      data.val.table = "users";
      this.$post(data, res => {
        // console.log(res);
      });
    },
    addDepository(a) {
      // this.$emit("change", { add: { id: a.id, sum: 0, name: a.name } });
    },
    change(a, b, c) {
      switch (a) {
        case 201:
          if (c) {
            this.tabData.push(b);
            this.$gd.users.push(b);
          }
          break;

        default:
          break;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.gx {
  overflow-x: auto;
}
</style>
